<template>
	<view>
		<view class="game">
			<view class="back" @click="back">
				<image src="./static/game/back.png" mode=""></image>
			</view>
			<view class="slogen">
				“诚甜然”拳王争霸赛
			</view>
			<view class="scoreBtn" @click="showRule=true" style="width: 180rpx; font-size: 34rpx;">入门秘笈</view>
			<view class="scoreBtn" style="width: 180rpx; font-size: 34rpx; top: 210rpx;" @click="showScore=true">积分
			</view>
			<view class="showScore" v-show="showScore &&scoreInfo.day!==undefined">
				<text class=" close" @click="showScore=false"></text>
				<view>
					<text>日</text>您今日获得 {{scoreInfo.day}}分 距离第一名还差{{scoreInfo.max_day-scoreInfo.day}}分
				</view>
				<view>
					<text>月</text>您本月获得 {{scoreInfo.month}}分 距离第一名还差{{scoreInfo.max_month-scoreInfo.month}}分
				</view>
				<view>
					<text>年</text>您本年获得 {{scoreInfo.year}}分 距离第一名还差{{scoreInfo.max_year-scoreInfo.year}}分
				</view>
			</view>
			<view class="showScore ruleBox" v-show="showRule">
				<text class=" close" @click="showRule=false"></text>
				<view>
					<view class="title"
						style="text-align: center;font-size: 36rpx;width: 100%; font-weight: bold;display: flex;justify-content: center;">
						入门秘笈</view>
					<view class="p">
						划拳又叫猜枚、猜拳，民间饮酒时一种助兴取乐的游戏，起源于汉代。
					</view>
					<view class="p">
						即饮酒时两人同时伸出手指并各说一个数， 谁说的数目跟双方所伸手指的总数相符，谁就算赢，输的人喝酒。它增添酒兴，陪衬喜庆，是中国古传至今仍时尚盛行的饮酒游戏。
					</view>

					<view class="p">
						线上划拳用点击数字并发声代替说数，用图形代替伸手指，即先选一个数，再选一个图形，谁选的数和双方选的图形中手指数相加结果一致，就算赢。
					</view>
					<view class="p" >
						赢家积一分，平局和输家不积分，不扣分。
					</view>
				</view>

			</view>


			<!--   用户 -->
			<view class="userInfo" style="top: 50rpx; bottom: auto;" v-if="user_b_info.uid">
				<image :src="user_b_info.avatar"></image>
				<view>
					<view>
						{{user_b_info.nickname||user_b_info.real_name||"网友"}}
					</view>

				</view>
			</view>
			<view class="userInfo" style="top: 88rpx; bottom: auto;" v-else>
				<image src="./static/game/def_avatar.png"></image>
				<view>
					<view style="width: 220rpx;font-size:30rpx ;">
						{{"2缺1,您的小伙伴还在路上..."}}
					</view>

				</view>
			</view>

			<view class="time" v-show="timeDisplay" :animation="timeAnimationData">
				<view>
					{{time}}S
				</view>
			</view>

			<view class="playground" v-show="gameLoad">

				<view class="player" style="top: 0; ">

					<view class="nums" style="padding: 30rpx 0; "
						v-show="user_b_result.watchword||user_b_result.watchword == 0">
						<view class="nums1">{{user_b_result.watchword}}</view>

					</view>
					<view class="gesture" style="transform: rotate(180deg);"
						v-show="user_b_result.gesture||user_b_result.gesture == 0">
						<view>
							<image :src="'./static/game/'+user_b_result.gesture+'.png'"></image>
						</view>

					</view>
				</view>

				<view class="player" style="bottom: 0;">

					<view class="nums" style="padding: 30rpx 0;"
						v-show="user_a_result.watchword||user_a_result.watchword==0">
						<view class="nums1">{{user_a_result.watchword}}</view>

					</view>
					<view class="gesture" v-show="user_a_result.gesture||user_a_result.gesture === 0">
						<view>
							<image :src="'./static/game/'+user_a_result.gesture+'.png'"></image>
						</view>

					</view>
				</view>

			</view>

			<!-- 
			<view :animation="animationData" class="bg" v-if="bgShow">

				<view>

					
				</view>

			</view> -->


			<view>



			</view>




			<!--   用户 -->
			<view class="userInfo" v-if="user_a_info.uid&&!showKeyboard">
				<image :src="user_a_info.avatar"></image>
				<view>
					<view>
						{{user_a_info.nickname||"昵称"}}
					</view>

				</view>
			</view>

			<!-- 键盘 -->
			<view v-show="showKeyboard">

				<view class="nums nums-layout">
					<view v-for="item in nums" :class="{active:num == item}" @click="chooseNum(item)">{{item}}
					</view>

				</view>

				<view class="gesture gesture-layout">
					<view v-for="(item,index) in gesList" @click="chooseGes(item,index)" :class="{active:ges == item}">
						<image :src="'./static/game/'+item+'.png'"></image>
					</view>
				</view>
			</view>
			<!--   参战按钮 -->
			<view class="start_fight_btn" v-if="showFightBtn" @click="createFight">参战</view>
		</view>





		<view class="tips" :animation="tipsAnimationData">
			<image src="./static/game/btn_bg.png"></image>
			<view>
				{{tipsText}}
			</view>
		</view>
	</view>

</template>

<script>
	// import Socket from '@/libs/game';
	let timer = null;
	let timer2 = null;

	let first = true;
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	const innerAudioContext2 = uni.createInnerAudioContext();
	innerAudioContext2.autoplay = false;
	const resultMap = {
		"0": "平局",
		"1": "你赢了",
		"-1": "你输了"
	}
	const BGAudioContext = uni.createInnerAudioContext();
	BGAudioContext.autoplay = false;
	BGAudioContext.volume = 0.04;
	BGAudioContext.loop = true;
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import methods from './methods.js'

	export default {
		data() {
			return {
				animationData: {},
				tipsAnimationData: {},
				timeAnimationData: {},
				num: '',
				ges: '',
				bgShow: true,
				tipsDisplay: false,
				tipsText: "请出拳",
				time: 10,
				time2: 12,
				timeDisplay: false,
				nums: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
				gesList: ['0', '1', '2', '3', '4', '5'],
				gameLoad: false,
				fight_row: {},
				round: 1,
				fight_staus: 0,
				firstRound: true, // 是够是首次加载
				showFightBtn: false,
				user_a_info: {}, // 自己这的信息
				user_b_info: {},
				user_a_result: {},
				user_b_result: {},
				showScore: true,
				scoreInfo: {},
				showKeyboard: false,
				showRule: false,

			}
		},
		onShow() {
			let uid = this.$store.state.app.uid;
			if (!this.checkLogin(uid)) return;
			let readyState = this.$socket2.ws.readyState;
			
			if(readyState== 2 || readyState == 3){
				this.initSocket()
				 uni.showLoading({
				 	title:"重连中..."
				 })
				setTimeout(v=>{
						this.init()
						uni.hideLoading()
				},2000)
			}else{
				this.init()
				
			}
			

			BGAudioContext.src = HTTP_REQUEST_URL + '/static/img/bg.mp3'
			BGAudioContext.play()

		


		},
		onUnload() {
			this.unload()
		},

		methods: {
			initSocket() {
				let form_type = 2;
				
				uni.$off('timeout')
				uni.$off('login_info')
				uni.$off('socket_error')
				uni.$off('err_tip ')
				
				uni.$once('timeout', () => {
					uni.showLoading({
						title: '重连中',
						mask: true
					})
				
					setTimeout(v=>{
						this.initSocket()
					},1000)
				});
				
				uni.$once('login_info', () => {
					console.log('success')
					this.$socket2.init();
						
				});
				
				uni.$on('socket_error', (e) => {
					console.log(e)
				});
				uni.$on('err_tip', (e) => {
					uni.showToast({
						title:e.message||""
					})
				});
					
				let token = this.$store.state.app.token;
				if(!token) return 
				this.$socket2.onStart(this.$store.state.app.token, form_type);
				uni.$once('socketOpen', () => {
					// 登录
					console.log('login')
					this.$socket2.send({
						data: this.$store.state.app.token,
						form_type: 2,
						type: 'login'
					});
			
			
			
			
			
				});
			},
			unload() {
				clearInterval(timer)
				clearInterval(timer2)
				this.time = 10;
				this.time2 = 12;

				this.num = '';
				this.ges = '';
				this.bgShow = true;

				this.timeDisplay = false;

				this.gameLoad = false;


				this.round = 1;

				first = true;
				this.user_a_info = {};
				this.user_b_info = {};


				this.user_a_result = {};
				this.user_b_result = {};


				this.showKeyboard = false;
				BGAudioContext.stop()

				uni.$off('user_score')
				uni.$off('fight_create')
				uni.$off('fight_staus')
				uni.$off('saveInfo')
			},
			init() {
				let tipsAnimation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease',
				});
				let uid = this.$store.state.app.uid;
				this.tipsAnimation = tipsAnimation;
				this.getFightStatus() //  获取状态  
				this.getUserScore(uid) //  积分


				uni.$on('fight_staus', (e) => {
					let fight_row = e.fight_row
					this.fight_row = fight_row || {}
					// 	

					//   如果是0  未开始 显示参战按钮
					// 点击参战后, 获取服务器返回的fight_staus status= 1


					// 如果是1 表明有一个人在参战了    需要检测目前参战的人是不是你自己(目前服务器没返回)
					// 如果是自己，就把参战按钮隐藏掉，显示出自己的头像
					// 如果不是自己，显示参战按钮，对方的头像显示出来，显示到上边。

					// status是2    需要检测目前参战的人是不是你自己
					// 如果是自己，操作按钮展示出来
					// 不是自己,两个头像都展示  自己观战.

					this.showFightBtn = false
					this.gameLoad = false
					this.showKeyboard = false
					this.timeDisplay = false
					if (e.status == 0) {
						// 未开始
						this.tipsShow('等待中', 1000, 0).then(res => {
							this.tipsHide()
						});
						this.showFightBtn = true


					}
					if (e.status == 1) {

						if (fight_row) {
							if (uid == fight_row.user_a) {
								this.user_a_info = fight_row.user_a_info

							} else if (uid == fight_row.user_b) {

								this.user_a_info = fight_row.user_b_info

							} else {
								this.showFightBtn = true

								this.user_b_info = fight_row.user_a_info.uid ? fight_row.user_a_info : fight_row
									.user_b_info;
							}
						}




					} else if (e.status == 2) {
						//  对局中  

						if (first) {
							this.gameInit()
							first = false
						}
						if (fight_row) {

							let hasResult = (fight_row.user_a_result && fight_row.user_a_result.id) && (fight_row
								.user_b_result && fight_row.user_b_result.id);

							if (hasResult) {

								innerAudioContext.src = HTTP_REQUEST_URL + '/static/img/' + fight_row.user_a_result
									.watchword + '.mp3'

								innerAudioContext.play()

								setTimeout(v => {
									innerAudioContext2.src = HTTP_REQUEST_URL + '/static/img/' + fight_row
										.user_b_result.watchword + '.mp3'

									innerAudioContext2.play()
								}, 500)

								clearInterval(timer);
								clearInterval(timer2);

							}

							// 如果自己是用户a 
							if (uid == fight_row.user_a) {
								this.user_a_info = fight_row.user_a_info
								this.user_b_info = fight_row.user_b_info
								this.user_a_result = fight_row.user_a_result
								this.user_b_result = fight_row.user_b_result
								this.gameLoad = true
								this.showKeyboard = true
								if (hasResult) {
									// 如果有结果
									let result = fight_row.user_a_result.result;

									this.getUserScore(uid) //  积分

									this.tipsShow(resultMap[result], 3000).then(res => {
										return this.tipsHide()
									}).then(res => {
										setTimeout(v => {
											this.start()
										}, 500)
									})
								}

							} else if (uid == fight_row.user_b) {

								this.user_a_info = fight_row.user_b_info
								this.user_b_info = fight_row.user_a_info
								this.user_a_result = fight_row.user_b_result
								this.user_b_result = fight_row.user_a_result
								this.gameLoad = true;
								this.showKeyboard = true

								if (hasResult) {
									// 如果有结果
									let result = fight_row.user_b_result.result;
									this.getUserScore(uid) //  积分
									this.tipsShow(resultMap[result], 3000).then(res => {
										return this.tipsHide()
									}).then(res => {
										setTimeout(v => {
											this.start()
										}, 500)
									})
								}

							} else {
								this.gameLoad = false
								this.user_a_info = fight_row.user_a_info
								this.user_b_info = fight_row.user_b_info
								this.user_a_result = fight_row.user_a_result
								this.user_b_result = fight_row.user_b_result
								// 观战 
								let resulta = fight_row.user_a_result.result;


								if (resulta == 0) {
									this.tipsShow('平局', 3000).then(res => {
										return this.tipsHide()
									}).then(res => {
										setTimeout(v => {
											this.start()
										}, 500)
									})
								} else if (resulta == 1) {
									let nickname = fight_row.user_a_info.nickname || fight_row.user_a_info
										.real_name
									this.tipsShow(nickname + "赢了", 3000).then(res => {
										return this.tipsHide()
									}).then(res => {
										setTimeout(v => {
											this.start()
										}, 500)
									})
								} else if (resulta == -1) {
									let nickname = fight_row.user_b_info.nickname || fight_row.user_b_info
										.real_name

									this.tipsShow(nickname + "赢了", 3000).then(res => {
										return this.tipsHide()
									}).then(res => {
										setTimeout(v => {
											this.start()
										}, 500)
									})

								}

							}




						}



					} else if (e.status == 3) {
						//  已结束  

						// this.showFightBtn = true;
						this.createFight()

					}







				});
				uni.$on('user_score', (e) => {
					console.log(e)
					this.scoreInfo = e;
					console.log(this.scoreInfo)
				});
				uni.$on('fight_create', (e) => {
					// console.log(e)
					// this.getFightStatus()
					this.gameLoad = false;

					this.init();

				});
				uni.$on('saveInfo', (e) => {
					console.log(e)
					let status = e.status;

					if (status == 2) {
						uni.showToast({
							title: "出拳失败",
							icon: "none"
						})
					}
					if (status == 3) {
						uni.showToast({
							title: "您出过啦",
							icon: "none"
						})
					}
					if (e.result_status == 1) {
						uni.showToast({
							title: "等待对方出拳",
							icon: "none"
						})
					}

					// e.status  1 成功 2 失败  3 重复 4 未参加

					// e.result_status  0 等待对方  1 OK 等待重新获取积分

				});


			},
			...methods,
			gameInit() {


				this.bgHide()
					.then(res => {
						this.bgShow = false;
						return this.tipsShow('对局开始', 1500)
					})
					.then(res => {

						return this.tipsHide()
					}).then(res => {

						this.start()
					})
			},

			getFightStatus() {

				this.$socket2.send({
					data: "",
					form_type: 2,
					type: 'getFightStatus'
				});

			},
			getUserScore(uid) {
				this.$socket2.send({
					data: {
						uid
					},
					form_type: 2,
					type: 'getUserScore'
				});
			},
			createFight() {
				// 参战
				this.$socket2.send({
					data: {
						uid: this.$store.state.app.uid,
					},
					form_type: 2,
					type: 'createFight'
				});
			},
			// 选择数
			chooseNum(item) {

				if (this.num) {
					return
				}

				this.num = item;

				this.ready()
			},
			// 选择手势
			chooseGes(item, index) {

				if (this.ges) return

				this.ges = item;
				this.ready()
			},
			// 准备发送
			ready() {
				let {
					num,
					ges
				} = this;

				if (num && ges) {
					clearInterval(timer);

					this.saveInfo({

						"watchword": num, //口令
						"gesture": ges, //手势
						"round": this.round++ //回合数
					})
				}
			},
			saveInfo(data) {
				this.$socket2.send({
					data: {
						"fight_sn": this.fight_row.fight_sn,
						"user_id": this.$store.state.app.uid,
						...data,
					},
					form_type: 2,
					type: 'saveInfo'
				});
			},
			// 倒计时
			timeCount(cb) {
				timer = setInterval(v => {
					if (this.time <= 0) {
						cb && cb();

						return
					}
					let {
						num,
						ges
					} = this;
					if (this.time == 3 && (!num || !ges)) {
						// #ifdef MP
						wx.vibrateShort({
							success: function() {
								console.log('success');
							}
						});
						// #endif
					}
					this.time--;

				}, 1000)

			},
			timeCount2(cb) {
				timer2 = setInterval(v => {
					if (this.time2 <= 0) {
						cb && cb();

						return
					}
					this.time2--;

				}, 1000)
			},

			// 开始游戏
			start() {

				setTimeout(v => {

					this.timeDisplay = true
					this.gameLoad = true;
					this.time = 10;
					this.time2 = 12;
					this.num = ''
					this.ges = ''
					this.user_a_result = {}
					this.user_b_result = {}
					clearInterval(timer);
					clearInterval(timer2);
					this.timeCount(() => {
						clearInterval(timer);

						this.num = Math.floor(Math.random() * this.nums.length);
						this.ges = Math.floor(Math.random() * this.gesList.length);


						this.ready()
						// this.$socket2.send({
						// 	data: {
						// 		"fight_sn": this.fight_row.fight_sn
						// 	},
						// 	form_type: 2,
						// 	type: 'endFightRow'
						// });
					})
					this.timeCount2(() => {

						uni.showToast({
							title: "人员离线,对局结束",
							icon: "none"
						})
				// 		if (this.$store.state.app.uid == this.fight_row.user_a_info.uid || this.$store
				// 			.state.app.uid == this.fight_row.user_b_info.uid) {
				

				// 		}
				this.$socket2.send({
					data: {
						"fight_sn": this.fight_row.fight_sn
					},
					form_type: 2,
					type: 'endFightRow'
				});

						this.bgShow = true;
						first = true
						this.unload()
						this.init()

					})
				}, 1000)

			},
			//  背景隐藏
			bgHide(cb) {
				return new Promise((resolve) => {
					var animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease-in-out',
					})
					animation.translate("-100%").step()
					this.animationData = animation.export();

					resolve()

				})

			},
			// 开始提示
			tipsShow(msg, time = 1000, delay = 0) {
				return new Promise((resolve) => {
					this.tipsText = msg
					this.tipsAnimation.opacity(1).scale(1, 1).step({
						delay
					})
					this.tipsAnimationData = this.tipsAnimation.export();
					setTimeout(v => {
						resolve()
					}, time)
				})

			},
			//  隐藏提示
			tipsHide() {
				return new Promise((resolve) => {
					this.tipsAnimation.opacity(0).scale(0, 1).step({
						delay: 100
					})
					this.tipsAnimationData = this.tipsAnimation.export();

					resolve()

				})


			},
			//  fanhui 
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}

		}
	}
</script>

<style>
	page {
		height: 100vh;
		overflow: hidden;
		background-color: #6d543a;
		padding-top: var(--status-bar-height);
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url("");
	}

	.back {
		position: absolute;
		left: 10rpx;
		top: 10rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 996;
	}

	.scoreBtn {
		position: absolute;
		right: 10rpx;
		top: 140rpx;
		padding: 6rpx 20rpx;
		width: 100rpx;
		z-index: 996;
		background-color: #673800;
		border-radius: 20rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.back image {

		width: 50rpx;
		height: 50rpx;
	}

	.time {
		position: absolute;
		left: 10rpx;
		top: 140rpx;
		width: 100rpx;
		height: 90rpx;

		display: flex;
		align-items: center;
		justify-content: center;
		background: #faebd2;
		box-shadow: 1px 1px 1px 1px #673800;
		border: 1px solid #6d543a;
		background-repeat: no-repeat;
		margin: 0 18rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		text-align: center;
		border-bottom: 0;
		color: #8f532f;
		font-weight: bold;

		cursor: pointer;
		font-size: 30rpx;

	}

	.slogen {
		position: fixed;
		bottom: 380rpx;
		left: 0;
		width: 100%;
		text-align: center;
		z-index: 0;
		pointer-events: none;
        color: #f7f7f7;
		font-size: 68rpx;
	
		font-family: "华文行楷";

	}

	.tips {
		position: absolute;
		right: 0;
		left: 0;
		top: 0;
		bottom: 160rpx;
		margin: auto;
		width: 426rpx;
		height: 92rpx;
		z-index: 9999;
		pointer-events: none;
		opacity: 0;

	}

	.tips image {
		position: absolute;
		width: 426rpx;
		height: 92rpx;
	}

	.tips view {
		position: absolute;
		width: 426rpx;
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF8A00;
		font-size: 40rpx;
		z-index: 99
	}

	.playground {

		position: absolute;
		right: 0;
		left: 0;
		top: 0;
		bottom: 200rpx;

		width: 540rpx;
		height: 540rpx;
		border-radius: 20rpx;
		border: 5px solid rgba(253, 146, 83, 0.8);
		/* background-color: rgba(73, 14, 6, 0.5); */
		margin: auto;


	}

	.player {
		position: absolute;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.game {
		height: 100vh;
		width: 100%;
		position: relative;
		background-position: center;
		background-size: 100%;
		background-repeat: no-repeat;

	}

	.person {
		position: absolute;
		top: 0;
		width: auto;
		height: 180rpx;
		margin: auto;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;

	}

	.person image {

		height: 180rpx;

		margin: 0 auto;

	}

	.bg {
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		width: 100%;
		z-index: 0;
		opacity: 0.9;
		margin: auto;
		left: 0;
		height: 630rpx;
	}

	.bg image {
		width: 100%;
		height: 630rpx;

	}

	.nums-layout {
		width: 100%;
		position: fixed;
		height: 200rpx;
		display: flex;
		bottom: 140rpx;
		left: 0;
	}

	.nums {

		justify-content: space-around;
		padding: 0 10rpx;
		flex-wrap: wrap;
	}

	.nums view {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #e4b77c;
		box-shadow: 1px 1px 1px 1px #673800;
		border: 1px solid #6d543a;
		background-repeat: no-repeat;
		margin: 0 18rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		text-align: center;
		border-bottom: 0;
		color: #8f532f;
		font-weight: bold;
		font-family: tahoma, arial, sans-serif;
		cursor: pointer;
		font-size: 40rpx;
	}

	.nums view.active {
		box-shadow: 2px 2px 1px 1px #673800;
		background: #e49d6a;
	}

	.gesture-layout {
		width: 100%;
		position: fixed;
		height: 140rpx;
		display: flex;
		bottom: 0;
		left: 0;
	}

	.gesture {

		justify-content: space-around;
		padding: 20rpx 20rpx;
	}

	.gesture view {
		width: 100rpx;

		height: 100rpx;
		display: flex;
	}

	.gesture view.active {
		box-shadow: 0 0 10px;
	}

	.gesture view image {
		width: 100%;

		height: 100rpx;
		display: flex;
	}

	.start_fight_btn {
		position: absolute;
		bottom: 50rpx;
		width: 300rpx;
		margin: auto;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #673800;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		color: #eee;
		font-size: 40rpx;
	}


	.userInfo {

		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 50rpx;
		width: 100%;

		color: #eee;
		font-size: 40rpx;
	}

	.showScore {

		height: 400rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		flex-wrap: wrap;
		flex-direction: column;
		top: calc(50% - 200rpx);
		width: 650rpx;
		left: 50rpx;
		color: #eee;
		font-size: 30rpx;
		background-color: #673800;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx #673800;
		z-index: 99999;
		padding: 20px 50rpx;
	}

	.showScore.ruleBox {

		height: 800rpx;

		top: calc(50% - 350rpx);
		overflow: hidden;


		flex-direction: row;
	}

	.showScore.ruleBox>view {

		overflow: scroll;
		height: 800rpx;
		flex-direction: column;
		padding-bottom: 100rpx;
	}

	.showScore view {
		width: 100%;
		display: flex;
		margin: 10rpx;
		align-items: center;
	}
	.showScore .p {
		text-indent: 2em;
	}

	.showScore .close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		color: #fff;
		opacity: 0.8;
		width: 32rpx;
		height: 32rpx;
		background-image: url("");

	}

	.showScore view text {

		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;



		background-color: #FF8A00;
		color: #fff;
		margin: 0 20rpx 0 0;
	}

	.userInfo image {
		width: 100rpx;
		margin: 0 10rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.userInfo .score {
		font-size: 24rpx;
	}
</style>